<template>
	<view>
		<unicloud-db ref="udb" collection="list" v-slot:default="{ data, loading }"
			:where="`_id=='${id}'`" getone>
			<view v-if="data">
				<image :src="data.image" mode="" style="width: 100%;"></image>
				<view class="title">{{data.title}}</view>
				<view class="desc">{{data.desc}}</view>
				<view class="datetime">{{data.datetime}}</view>
				<view class="price">{{data.price}}</view>

				<button @click="addToCarList(data)">加入购物车</button>
			</view>

			<view v-show="loading" class="pull-down-loading">数据加载中...</view>
		</unicloud-db>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: ''
			};
		},
		onLoad({
			id
		}) {
			this.id = id;
		},
		methods: {
			async addToCarList(item) {
				const data = {
					...item,
					count: 1,
					state: false
				};
					
				// 调用云函数
				const resp = await uniCloud.callFunction({
					name: 'add_to_car_list',
					data: {
						item: data
					}
				})
				
				uni.showToast({
					title:resp.result.message
				})
			}	
		}
	}
</script>

<style lang="scss" scoped>
	.pull-down-loading {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>